<template>
  <e-container style="margin-top: 24px">
    <a-spin :spinning="loading" tip="Loading...">
      <div class="total-amount">Total Amount (RMB)：{{ totalAmount.toFixed(2) }}</div>
      <a-table
        :columns="columns"
        :data-source="data"
        class="ant-table-striped"
        :pagination="false"
        :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
      >
        <template #emptyText>
          <e-empty />
        </template>
      </a-table>
    </a-spin>
  </e-container>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import statistics from '@/api/statistics-bu'

const columns = [
  {
    title: 'Sales Personnel',
    dataIndex: 'empName'
  },
  {
    title: 'Branch',
    dataIndex: 'branchName'
  },
  {
    title: 'Invoice Amount (In Currency)',
    dataIndex: 'invoiceAmount',
    align: 'right',
    customRender: ({ text }) => (text ? Number(text).toFixed(2) : '')
  },
  {
    title: 'Currency',
    dataIndex: 'currencyName'
  },
  {
    title: 'Exchange Rate (RMB)',
    dataIndex: 'rate',
    customRender: ({ text }) => (text ? Number(text).toFixed(2) : '')
  },
  {
    title: 'Invoice Amount (RMB)',
    dataIndex: 'invoiceAmountRMB',
    align: 'right',
    customRender: ({ text }) => (text ? Number(text).toFixed(2) : '')
  }
]
const loading = ref(false)
const props = defineProps({
  fromDate: Object,
  toDate: Object
})
const data = ref([])
const totalAmount = ref(0)
const getList = () => {
  loading.value = true
  statistics
    .getAdminInvoiceNumberPersonnel({
      fromDate: dayjs(props.fromDate).format('YYYYMM'),
      toDate: dayjs(props.toDate).format('YYYYMM')
    })
    .then(res => {
      if (res.code === 2000) {
        let total = 0
        data.value = res.data
        data.value.forEach(item => {
          total += item.invoiceAmountRMB
        })
        totalAmount.value = total
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
getList()
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
.total-amount {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  font-weight: 700;
  color: @text-black;
  font-size: 14px;
  padding-right: 32px;
  margin-bottom: 10px;
}
</style>
